<template>
  <div class="myorder">
    <van-nav-bar
      title="我的订单"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="myorder_items" v-if="allOrder.length!=0">
          <div class="myorder_item" v-for="(item,index) in allOrder" :key="index">
            <div class="myorder_item_text">
              <div class="myorder_item_text_top">
                <div class="myorder_item_text_rate">{{item.product_interest_rate}}%</div>
                <div class="myorder_item_text_meta">年利率</div>
              </div>
              <div class="myorder_item_text_title">
                {{item.product_name}}
              </div>
            </div>
            <div class="myorder_item_rate">
              <!-- <div class="myorder_item_rate_nopay" v-show="showPay(item.payment_status)">
                未支付
              </div> -->
              <div class="myorder_item_rate_produ_price">
                ￥{{item.product_price}}
              </div>
              <!-- <div class="myorder_item_rate_dayAdd">+0.07</div> -->
            </div>
          </div>
        </div>
    <!-- <van-tabs v-model="activeName" swipeable animated> -->
      <!-- 全部 -->
      <!-- <van-tab title="全部" name="a">
        
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="订单为空"
        />
      </van-tab> -->
      <!-- 未付款 -->
      <!-- <van-tab title="未付款" name="b">
        <div class="myorder_items" v-if="NoPayment.length!=0">
          <div class="myorder_item" v-for="(item,index) in NoPayment" :key="index">
            <div class="myorder_item_text">
              <div class="myorder_item_text_top">
                <div class="myorder_item_text_rate">{{item.product_interest_rate}}%</div>
                <div class="myorder_item_text_meta">年利率</div>
              </div>
              <div class="myorder_item_text_title">
                {{item.product_name}}
              </div>
            </div>
            <div class="myorder_item_rate">
              <div class="myorder_item_rate_produ_price">
                ￥{{item.product_price}}
              </div>
            </div>
          </div>
        </div>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="订单为空"
          v-else
        />
      </van-tab> -->
      <!-- 已付款 -->
      <!-- <van-tab title="已付款" name="c">
        <div class="myorder_items" v-if="havePayment.length!=0">
          <div class="myorder_item" v-for="(item,index) in havePayment" :key="index">
            <div class="myorder_item_text">
              <div class="myorder_item_text_top">
                <div class="myorder_item_text_rate">{{item.product_interest_rate}}%</div>
                <div class="myorder_item_text_meta">年利率</div>
              </div>
              <div class="myorder_item_text_title">
                {{item.product_name}}
              </div>
            </div>
            <div class="myorder_item_rate">
              <div class="myorder_item_rate_produ_price">
                ￥{{item.product_price}}
              </div>
            </div>
          </div>
        </div>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="订单为空"
          v-else
        />
      </van-tab> -->
    <!-- </van-tabs> -->
  </div>
</template>

<script>
import {getSelfOrder} from '@/api/profile'
export default {
  data(){
    return {
      activeName:'',
      allOrder:[],
      havePayment:[],
      NoPayment:[],
    }
  },
  computed:{
    
  },
  created(){
    this.getAllOrder()
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    getAllOrder(){
      getSelfOrder().then(res=>{
        if(res.data.list){
          this.allOrder  = res.data.list
          let arr = res.data.list
          for(let i=0;i<arr.length;i++){
            if(arr[i].payment_status==1){
              this.NoPayment.push(arr[i]);
            }
            if(arr[i].payment_status==2){
              this.havePayment.push(arr[i]);
            }
          }
        }
        
      })
    },
    showPay(status){
      if(status==1){
        return true;
      }
      return false;
    },
    allOrderShow(){
      if(this.allOrder.length==0){
        return true
      }
      return false;
    },
    havePaymentShow(){
      if(this.havePayment.length==0){
        return true
      }
      return false;
    },
    NoPaymentShow(){
      if(this.NoPayment.length==0){
        return true
      }
      return false;
    }

  }
}
</script>

<style lang="less">
.myorder_items{
  width: 90%;
  margin: 10px auto;
  .myorder_item{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 80px;
    // line-height: 20px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    margin-top: 10px;
    // border: 1px solid red;
    .myorder_item_text{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      height: 100%;
      // border: 1px solid blue;
      .myorder_item_text_top{
        display: flex;
        width: 80%;
        height: 30px;
        margin-top: 10px;
        justify-content: space-around;
        .myorder_item_text_rate{
          color: rgba(224, 19, 36, 100);
          font-size: 20px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
        .myorder_item_text_meta{
          margin-top: 5px;
          color: rgba(185, 187, 189, 100);
          font-size: 14px;
          text-align: left;
          font-family: PingFangSC-extraLight;
        }
      }
      .myorder_item_text_title{
        color: rgba(16, 16, 16, 100);
        height: 100px;
        font-size: 18px;
        text-align: left;
        font-family: PingFangSC-light;
        margin-top: 5px;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
    /* autoprefixer: off */
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        word-break:break-all;
      }
    }
    .myorder_item_rate{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      width: 40%;
      height: 100%;
      // border: 1px solid black;
      .myorder_item_rate_purchase{
        color: rgba(16, 16, 16, 100);
        font-size: 18px;
        text-align: left;
        font-family: PingFangSC-regular;
        margin-bottom: 15px;
        // margin-top: 20px;
      }
      .myorder_item_rate_nopay{
        color: rgba(20, 130, 241, 100);
        font-size: 16px;
        text-align: left;
        font-family: PingFangSC-regular;
        // margin-top: 14px;
        margin-bottom: 15px;
      }
      .myorder_item_rate_dayAdd{
        color: rgba(230, 43, 45, 100);
        font-size: 18px;
        text-align: left;
        font-family: PingFangSC-regular;
        margin-top: 10px;
      }
      .myorder_item_rate_produ_price{
        color: rgba(64, 64, 64, 100);
        font-size: 25px;
        text-align: left;
        font-family: PingFangSC-semiBold;
        // margin-top: 13px;
        margin-bottom: 10px;
      }
    }
  }
}













.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
</style>